﻿/******************************************************************************
* File description: PracticeCanvas
* Function: 打靶动画绘制
* Current Version: 1.0.0
* Author: JNN
* Date: 2025-07-01
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/

import QtQuick 2.0
import "../../components"

Rectangle {
    id: root

    property color bcgColor: Qt.rgba(224/255, 230/255, 233/255, 1)

    color: bcgColor

    radius: 5*dp


    // 预设 ==========================================================================================
    property real cScale: 1.36    // 画布的宽高比
    property var lenBase: Math.min(canvas.width, canvas.height*cScale)


    // 绘制信息 =======================================================================================

    property var _feedPortPosi: 0
    property var _feedPortState: 0
    property var _wheelAngle: 0
    property var _wheelState: 0
    property var _barPosi: 0
    property var _barState: 0
    property var _pump1State: 0     // 气泵状态（其实我也不知道是哪个是气泵哪个水泵）
    property var _pump2State: 0     // 水泵状态
    property var _bulbState: [0, 0, 0, 0]   // -1未连接 0正常 1第一次经过 2第二次经过 3故障
    property var _blowTargetState: 0
    property var _brakeState: 0
    property var _heState: 0        // 氦气状态
    property var _absorbState: 0    // 吸取梭体 0关 1开
    property var absorbArrowIdx: 1

    property real _pumpArrowPosi: 0      // 气泵和气泵箭头位置
    property real _heArrowPosi: 0        // 氦气箭头位置

    // 和小黄条的对接
    property bool _drawTargetBottle: true


    property int  _bulbNum: 2

    // 图像
    property string imageBulb_r: "qrc:/picture/animation/bulb_r.png"
    property string imageBulb_g: "qrc:/picture/animation/bulb_g.png"
    property string imageBulb_b: "qrc:/picture/animation/bulb_b.png"
    property string imageBulb_1: "qrc:/picture/animation/bulb_1.png"
    property string imageBulb_o: "qrc:/picture/animation/bulb_o.png"
    property var imagePump1: {
        if(_pump1State===0)     return "qrc:/picture/animation/Practice/pump1_0.png"
        if(_pump1State===1)     return "qrc:/picture/animation/Practice/pump1_b.png"
        if(_pump1State===-1)    return "qrc:/picture/animation/Practice/pump1_r.png"
    }
    property var imagePump2: {
        if(_pump2State===0)     return "qrc:/picture/animation/Practice/pump2_0.png"
        if(_pump2State===1)     return "qrc:/picture/animation/Practice/pump2_b.png"
        if(_pump2State===-1)    return "qrc:/picture/animation/Practice/pump2_r.png"
    }
    property var imageBottle: {
        return "qrc:/picture/animation/Practice/bottle_0.png"
    }
    // V1.0 ----------------------
//    property var imageBcg: "qrc:/picture/animation/Practice/bcg.png"
//    property var imageBcg_left: "qrc:/picture/animation/Practice/bcg_left.png"
//    property var imageBcg_right: "qrc:/picture/animation/Practice/bcg_right.png"
    // V2.0 ----------------------
    property var imageBcg_top: "qrc:/picture/animation/Practice/bcg_top.png"
    property var imageBcg_bottom: "qrc:/picture/animation/Practice/bcg_bottom.png"
    property var imageBcg_bottom_bot: "qrc:/picture/animation/Practice/bcg_bottom_bot.png"
    property var imageBcg_center: "qrc:/picture/animation/Practice/bcg_center.png"
    property var imageBcg_bar: "qrc:/picture/animation/Practice/bcg_bar.png"
    property var imageBcg_left: {
        if(_heState === 1)      return "qrc:/picture/animation/Practice/bcg_left_b.png"
        else                    return "qrc:/picture/animation/Practice/bcg_left_0.png"
    }

    property var imageNidcs: "qrc:/picture/animation/Practice/nidcs.png"
    property var imageFeedPort: {
        // V1.0 ----------------------
//        if(_feedPortState === 0)   return "qrc:/picture/animation/Practice/feedPort_0.png"
//        if(_feedPortState === 1)   return "qrc:/picture/animation/Practice/feedPort_b.png"
//        if(_feedPortState === -1)  return "qrc:/picture/animation/Practice/feedPort_r.png"
        // V2.0 ----------------------
        if(_feedPortState === 0)    return "qrc:/picture/animation/Practice/feedPort_0.png"
        if(_feedPortState === 1)    return "qrc:/picture/animation/Practice/feedPort_b.png"
    }
    // V1.0
//    property var imageFeedPort_top: {
//        if(_feedPortState === 0)   return "qrc:/picture/animation/Practice/feedPort_top_0.png"
//        if(_feedPortState === 1)   return "qrc:/picture/animation/Practice/feedPort_top_b.png"
//        if(_feedPortState === -1)  return "qrc:/picture/animation/Practice/feedPort_top_r.png"
//    }
//    property var imageFeedPort_center: {
////        if(_feedPortState === -1 || _brakeState === -1) return "qrc:/picture/animation/Practice/feedPort_center_r.png"
////        if(_feedPortState === 1 || _brakeState === 1)   return "qrc:/picture/animation/Practice/feedPort_center_b.png"
////        return  "qrc:/picture/animation/Practice/feedPort_center_0.png"
//        if(_feedPortState === 0)   return "qrc:/picture/animation/Practice/feedPort_center_0.png"
//        if(_feedPortState === 1)   return "qrc:/picture/animation/Practice/feedPort_center_b.png"
//        if(_feedPortState === -1)  return "qrc:/picture/animation/Practice/feedPort_center_r.png"
//    }
//    property var imageFeedPort_bottom: {
//        if(_feedPortState === 0)   return "qrc:/picture/animation/Practice/feedPort_bottom_0.png"
//        if(_feedPortState === 1)   return "qrc:/picture/animation/Practice/feedPort_bottom_b.png"
//        if(_feedPortState === -1)  return "qrc:/picture/animation/Practice/feedPort_bottom_r.png"
//    }
    property var imageWheel: {
        if(_wheelState === 0)  return "qrc:/picture/animation/Practice/wheel_0.png"
        if(_wheelState === 1)  return "qrc:/picture/animation/Practice/wheel_b.png"
        if(_wheelState === -1) return "qrc:/picture/animation/Practice/wheel_r.png"
    }
    property var imageBase: "qrc:/picture/animation/Practice/base_0.png"
    property var imageBar: {
        return "qrc:/picture/animation/Practice/move_0.png"
//        if(_barState === 0)  return "qrc:/picture/animation/Practice/move_0.png"
//        if(_barState === 1)  return "qrc:/picture/animation/Practice/move_b.png"
//        if(_barState === -1) return "qrc:/picture/animation/Practice/move_r.png"
    }
    property var imageTBar_left: {
        if(_brakeState === 1 || _barState === 1)  return "qrc:/picture/animation/Practice/bar_left_b.png"
        if(_brakeState === 0)  return "qrc:/picture/animation/Practice/bar_left_0.png"
        if(_brakeState === -1) return "qrc:/picture/animation/Practice/bar_left_r.png"
    }
    property var imageTBar_right: {
        if(_barState === 0)  return "qrc:/picture/animation/Practice/bar_right_0.png"
        if(_barState === 1)  return "qrc:/picture/animation/Practice/bar_right_b.png"
        if(_barState === -1) return "qrc:/picture/animation/Practice/bar_right_r.png"
    }
    property string imageSuperPipe: {
        if(_blowTargetState === 0)               return "qrc:/picture/animation/superPipe2.png"
        else if(_blowTargetState === 1)          return "qrc:/picture/animation/superPipe2_b.png"
        else                                     return "qrc:/picture/animation/superPipe2_r.png"
    }
    property string imageGlasses: "qrc:/picture/animation/Practice/glasses.png"
    property string imageX: "qrc:/picture/animation/errorIcon.png"

    property string imageArrow_b_up: "qrc:/picture/animation/Practice/pumpArrow_b_up.png"
    property string imageArrow_b_down: "qrc:/picture/animation/Practice/pumpArrow_b_down.png"
    property string imageArrow_b_left: "qrc:/picture/animation/Practice/pumpArrow_b_left.png"
    property string imageArrow_g_up: "qrc:/picture/animation/Practice/pumpArrow_g_up.png"
    property string imageArrow_g_down: "qrc:/picture/animation/Practice/pumpArrow_g_down.png"
    property string imageArrow_g_left: "qrc:/picture/animation/Practice/pumpArrow_g_left.png"

    function startAnimation(){
        timer.start()
    }
    function stopAnimation(){
        timer.stop()
    }

    // 绘制处理 =======================================================================================
    Timer{
        id: timer
        interval: 30
        repeat: true
        onTriggered: {
            if(root.visible){
                updateState()
            }
        }
    }



    /** @brief 绘制背景 */
//    function drawBcg(ctx){
//        ctx.drawImage(imageBcg, ptPosi.bcg.x*width, ptPosi.bcg.y*height, ptPosi.bcg.width*width, ptPosi.bcg.height*height)
//    }
    function drawBcg_left(ctx){
        ctx.drawImage(imageBcg_left, ptPosi.bcg.x*width, ptPosi.bcg.y*height, ptPosi.bcg.width*width, ptPosi.bcg.height*height)
    }
//    function drawBcg_right(ctx){
//        ctx.drawImage(imageBcg_right, ptPosi.bcg.x*width, ptPosi.bcg.y*height, ptPosi.bcg.width*width, ptPosi.bcg.height*height)
//    }
    function drawBcg_top(ctx){
        ctx.drawImage(imageBcg_top, ptPosi.bcg.x*width, ptPosi.bcg.y*height, ptPosi.bcg.width*width, ptPosi.bcg.height*height)
    }function drawBcg_bottom(ctx){
        ctx.drawImage(imageBcg_bottom, ptPosi.bcg.x*width, ptPosi.bcg.y*height, ptPosi.bcg.width*width, ptPosi.bcg.height*height)
    }function drawBcg_bottom_bot(ctx){
        ctx.drawImage(imageBcg_bottom_bot, ptPosi.bcg.x*width, ptPosi.bcg.y*height, ptPosi.bcg.width*width, ptPosi.bcg.height*height)
    }function drawBcg_center(ctx){
        ctx.drawImage(imageBcg_center, ptPosi.bcg.x*width, ptPosi.bcg.y*height, ptPosi.bcg.width*width, ptPosi.bcg.height*height)
    }function drawBcg_bar(ctx){
        ctx.drawImage(imageBcg_bar, ptPosi.bcg.x*width, ptPosi.bcg.y*height, ptPosi.bcg.width*width, ptPosi.bcg.height*height)
    }
    function drawGlasses(ctx){
        ctx.drawImage(imageGlasses, ptPosi.bcg.x*width, ptPosi.bcg.y*height, ptPosi.bcg.width*width, ptPosi.bcg.height*height)
    }
    /** @brief 加速器 */
    function drawNidcs(ctx){
        ctx.drawImage(imageNidcs, ptPosi.nidcs.x*width, ptPosi.nidcs.y*height, ptPosi.nidcs.width*width, ptPosi.nidcs.height*height)
    }
    /** @brief 绘制进料口 */
    function drawFeedPort(ctx){
        ctx.drawImage(imageFeedPort, ptPosi.feedPort.x*width,
                                     ptPosi.feedPort.y0*height + _feedPortPosi*(ptPosi.feedPort.y1-ptPosi.feedPort.y0)*height,
                                     ptPosi.feedPort.width*width,
                                     ptPosi.feedPort.height*height)
    }
//    function drawFeedPort_top(ctx){
//        ctx.drawImage(imageFeedPort_top, ptPosi.feedPort.x*width,
//                                     ptPosi.feedPort.y0*height + _feedPortPosi*(ptPosi.feedPort.y1-ptPosi.feedPort.y0)*height,
//                                     ptPosi.feedPort.width*width,
//                                     ptPosi.feedPort.height*height)
//    }
//    function drawFeedPort_center(ctx){
//        ctx.drawImage(imageFeedPort_center, ptPosi.feedPort.x*width,
//                                     ptPosi.feedPort.y0*height + _feedPortPosi*(ptPosi.feedPort.y1-ptPosi.feedPort.y0)*height,
//                                     ptPosi.feedPort.width*width,
//                                     ptPosi.feedPort.height*height)
//    }
//    function drawFeedPort_bottom(ctx){
//        ctx.drawImage(imageFeedPort_bottom, ptPosi.feedPort.x*width,
//                                     ptPosi.feedPort.y0*height + _feedPortPosi*(ptPosi.feedPort.y1-ptPosi.feedPort.y0)*height,
//                                     ptPosi.feedPort.width*width,
//                                     ptPosi.feedPort.height*height)
//    }
    function drawBar(ctx){
        ctx.drawImage(imageBar, ((ptPosi.bar.x1 - ptPosi.bar.x0) * _barPosi + ptPosi.bar.x0) * width,
                                     ptPosi.bar.y*height,
                                     ptPosi.bar.width*width,
                                     ptPosi.bar.height*height)
    }function drawTBar(ctx){
        ctx.drawImage(imageTBar_right, ((ptPosi.tBar.x1 - ptPosi.tBar.x0) * _barPosi + ptPosi.tBar.x0) * width,
                                     ptPosi.tBar.y*height - 0.68*ptPosi.tBar.height*height*0.68,
                                     ptPosi.tBar.width*width,
                                     ptPosi.tBar.height*height)
        ctx.drawImage(imageTBar_left, ((ptPosi.tBar.x1 - ptPosi.tBar.x0) * _barPosi + ptPosi.tBar.x0) * width,
                                     ptPosi.tBar.y*height - 0.68*ptPosi.tBar.height*height*0.68,
                                     ptPosi.tBar.width*width,
                                     ptPosi.tBar.height*height)
    }
    // 绘制旋转组
    function drawRotationGroup(ctx){
        let angle = - Math.PI * _wheelAngle/2

        ctx.save()
        let x = ((ptPosi.rotGroup.x1 - ptPosi.rotGroup.x0) * _barPosi + ptPosi.rotGroup.x0) * width
        let y = ptPosi.rotGroup.y*height
        let w = ptPosi.rotGroup.width*width
        let h = ptPosi.rotGroup.height*height
        let cx = x + 0.5 * w
        let cy = y + 0.5 * h
        ctx.translate(cx, cy)
        ctx.rotate(angle)
        ctx.translate(-cx, -cy)

        // 转盘
        ctx.drawImage(imageWheel,  x, y, w, h)
        // 底座
        ctx.drawImage(imageBase,  x, y, w, h)
//        // 气泵
//        ctx.drawImage(imagePump1,  x, y, w, h)
//        ctx.drawImage(imagePump2,  x, y, w, h)
        // 瓶子
        if(_drawTargetBottle)   ctx.drawImage(imageBottle,  x, y, w, h)
        // 瓶子上面的<吸取梭体>标注
        if(_absorbState === 1){
            ctx.drawImage("qrc:/picture/animation/liquidArrow/absorb_" + Math.floor(absorbArrowIdx) + ".png", x, y, w, h);
        }

        // 箭头
        if(_pump1State === 1 || _pump2State === 1){

            let img_left, img_down
            if(_pump1State === 1) {
                img_left = imageArrow_b_left
                img_down = imageArrow_b_down
            }else {
                img_left = imageArrow_g_left
                img_down = imageArrow_g_down
            }
            // 进去的箭头 （从右往左
            ctx.drawImage(img_left,
                                    (x+0.5*w)+ptPosi.rotInArrowPath.x0*w + (ptPosi.rotInArrowPath.x1-ptPosi.rotInArrowPath.x0)*(1-_pumpArrowPosi)*w - ptPosi.rotInArrowPath.width*0.5*w,
                                    (y+0.5*h)+ptPosi.rotInArrowPath.y*h - ptPosi.rotInArrowPath.height*0.5*h,
                                    ptPosi.rotInArrowPath.width*w,
                                    ptPosi.rotInArrowPath.height*h)
            // 出来的箭头
            ctx.drawImage(img_down,
                                  (x+0.5*w)+ptPosi.rotOutArrowPath.x*w - ptPosi.rotOutArrowPath.width*0.5*w,
                                  (y+0.5*h)+ptPosi.rotOutArrowPath.y0*h + (ptPosi.rotOutArrowPath.y1-ptPosi.rotOutArrowPath.y0)*_pumpArrowPosi*h - ptPosi.rotOutArrowPath.height*0.5*h,
                                  ptPosi.rotOutArrowPath.width*w,
                                  ptPosi.rotOutArrowPath.height*h)

            _pumpArrowPosi = _pumpArrowPosi + 0.02
            if(_pumpArrowPosi > 1){
                _pumpArrowPosi -= 1
            }
        }else{
            _pumpArrowPosi = 0
        }


        ctx.restore()
    }
    // 管子
    function drawSuperPipe(ctx){
        ctx.drawImage(imageSuperPipe, ptPosi.superPipe.x*width,
                                      ptPosi.superPipe.y*height,
                                      ptPosi.superPipe.width*width,
                                      ptPosi.superPipe.height*height)
    }
    /** @brief 绘制灯泡 */
    function drawBulb(ctx){
        for(let i = 0; i < _bulbNum; i ++){
            let imgSource = imageBulb_r
            if     (_bulbState[_bulbNum-1-i] === -1)  imgSource = imageBulb_1
            else if(_bulbState[_bulbNum-1-i] === 0)   imgSource = imageBulb_b
            else if(_bulbState[_bulbNum-1-i] === 1)   imgSource = imageBulb_g
            else if(_bulbState[_bulbNum-1-i] === 2)   imgSource = imageBulb_b
            else if(_bulbState[_bulbNum-1-i] === 3)   imgSource = imageBulb_r
            else if(_bulbState[_bulbNum-1-i] === 4)   imgSource = imageBulb_1        // 屏蔽状态
            ctx.drawImage(imgSource, ptPosi.bulbList[i].x*width - ptPosi.bulbList[i].width*0.5*width,
                                     ptPosi.bulbList[i].y*height - ptPosi.bulbList[i].height*0.5*height,
                                     ptPosi.bulbList[i].width*width,
                                     ptPosi.bulbList[i].height*height)
        }
    }

    /** @brief 绘制叉叉（没做） */
    function drawXXX(ctx){
        var sizeX = Math.min(0.07*height, 0.044*width)

        // 旋转组
        ctx.drawImage(imageX, ((ptPosi.rotGroup.x1 - ptPosi.rotGroup.x0) * _barPosi + ptPosi.rotGroup.x0) * width + ptPosi.rotGroup_X.x_bias*width - sizeX*0.5,
                      ptPosi.rotGroup.y*height + ptPosi.rotGroup_X.y_bias*height - sizeX*0.5,
                      sizeX, sizeX)
    }
    /** @brief 绘制氦气的箭头 */
    function drawHeArrow(ctx){

        if(_heState === 1){
            ctx.drawImage(imageArrow_b_down, ptPosi.h2InArrowPath.x*width - ptPosi.h2InArrowPath.width*0.5*width,
                                             ptPosi.h2InArrowPath.y0*height + (ptPosi.h2InArrowPath.y1-ptPosi.h2InArrowPath.y0)*_heArrowPosi*height - ptPosi.h2InArrowPath.height*0.5*height,
                                             ptPosi.h2InArrowPath.width*width,
                                             ptPosi.h2InArrowPath.height*height)
//            ctx.drawImage(imageArrow_b_down, ptPosi.h2InArrowPath.x*width - ptPosi.h2InArrowPath.width*0.5*width,
//                                             ptPosi.h2InArrowPath.y1*height - ptPosi.h2InArrowPath.height*0.5*height,
//                                             ptPosi.h2InArrowPath.width*width,
//                                             ptPosi.h2InArrowPath.height*height)
            ctx.drawImage(imageArrow_b_up, ptPosi.h2OutArrowPath.x*width - ptPosi.h2OutArrowPath.width*0.5*width,
                                             ptPosi.h2OutArrowPath.y0*height + (ptPosi.h2OutArrowPath.y1-ptPosi.h2OutArrowPath.y0)*(1-_heArrowPosi)*height - ptPosi.h2OutArrowPath.height*0.5*height,
                                             ptPosi.h2OutArrowPath.width*width,
                                             ptPosi.h2OutArrowPath.height*height)
//            ctx.drawImage(imageArrow_b_up, ptPosi.h2OutArrowPath.x*width - ptPosi.h2OutArrowPath.width*0.5*width,
//                                             ptPosi.h2OutArrowPath.y1*height - ptPosi.h2OutArrowPath.height*0.5*height,
//                                             ptPosi.h2OutArrowPath.width*width,
//                                             ptPosi.h2OutArrowPath.height*height)
            _heArrowPosi = _heArrowPosi + 0.02
            if(_heArrowPosi > 1){
                _heArrowPosi -= 1
            }
        }else{
            _heArrowPosi = 0
        }

    }


    PracticeCanvasPosition{
        id: ptPosi
    }

    /** @brief 把从C++获取的值粘过来 */
    function copyValue(res){
        _feedPortPosi    = res["FeedPortPosi"]
        _feedPortState   = res["FeedPortState"]
        _wheelAngle      = res["WheelAngle"]
        _wheelState      = res["WheelState"]
        _barPosi         = res["BarPosi"]
        _barState        = res["BarState"]
        _pump2State      = res["Pump2State"]
        _pump1State      = res["Pump1State"]
        _heState         = res["PumpN2State"]
        _blowTargetState = res["BlowTargetState"]
        _brakeState      = res["BrakeState"]
        _bulbState       = res["BulbState"]
        _absorbState     = res["AbsorbState"]

        _drawTargetBottle = res["DrawTargetBottle"]


    }

    /** @brief 从C++端获取动画状态并刷新画布 */
    function updateState(){

//        console.time("updateState")

        let res = CAnimationPractice.requestInfo()
        copyValue(res)
//        console.timeEnd("updateState")
        refresh()
    }

    /** @brief 刷新画布 */
    function refresh(){
        canvas.requestPaint()
    }



    Canvas{
        id: canvas
        anchors.centerIn: parent
        x: 0*dp; y: 20*dp
        width: parent.width
        height: parent.height
        onPaint: {

//            console.time("Paint")

            var ctx = canvas.getContext("2d")
            // 清空画布
            ctx.fillStyle = root.bcgColor
            ctx.fillRect(0, 0, width, height)
            drawSuperPipe(ctx)
            drawFeedPort(ctx)
            drawBcg_bottom(ctx)
//            drawBcg_right(ctx)
//            drawFeedPort_top(ctx)
//            drawFeedPort_center(ctx)
            drawBar(ctx)
            drawBcg_top(ctx)
            drawRotationGroup(ctx)
//            drawFeedPort_bottom(ctx)
            drawBulb(ctx)
            drawBcg_bar(ctx)
            drawTBar(ctx)
            drawBcg_left(ctx)
            drawBcg_center(ctx)
            drawBcg_bottom_bot(ctx)
            drawGlasses(ctx)
            drawNidcs(ctx)
//            drawXXX(ctx)
            drawHeArrow(ctx)


//            console.timeEnd("Paint")
            absorbArrowIdx += 0.05
            if(absorbArrowIdx >= 4){
                absorbArrowIdx -= 3
            }
        }
    }
}
